<template>
  <div class="topnav">
    <div class="menu" v-if="showMenu" @click="hideMenu" :class="!showMenu1 ? '' : 'animate2'">
      <div class="list animate" :class="!showMenu1 ? '' : 'animate1'" @click.stop="">
        <div class="title"><i class="iconxuqiudengji iconfont"></i> 参观登记<i class="iconfont iconxia" :class="cloumnShow ? 'curr' :''" @click="cloumnShow=!cloumnShow"></i></div>
        <ul class="column" :class="!cloumnShow ? 'show' :''">
          <li v-for="(item,i) in navData" :key="i">

            <a @click="goPath(item.path)" class="link" :class="item.path == $route.path ? 'curr' :''">
              <i class=" iconfont" :class="item.icon"></i>{{item.title}}
            </a>
          </li>

        </ul>
        <div class="message">
          <p class="titles"><i class="iconfont icongonggao"></i><strong>公告</strong></p>
          <p class="fz-12"> 2020重庆国际交通轻量化展览会将于10月14日至16日在重庆国际会议展览中心（南岸区）举行。 </p>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="icons" @click="showMenu=!showMenu">
        <i class="iconfont iconcaidan"></i>
      </div>
      <div class="txt"> 2020重庆国际交通轻量化展览会</div>
    </div>

  </div>
</template>

<script lang="ts">
import TopNav from "./topNav";
export default TopNav;
</script>

<style lang="scss" scoped>
.topnav {
  .nav {
    text-align: center;
    font-size: 16px;
    line-height: 56px;
    display: flex;
    @include theme-color-btn;
    .icons {
      width: 56px;
      height: 56px;
      padding: 0;
      border-radius: 0;
      i {
        line-height: 56px;
        height: 56px;
        width: 56px;
        font-size: 30px;
      }
      
    }
    .txt{
      flex: 1;
    }
  }
  .menu {
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    &.animate2 {
      animation: 0.3s ease-out bg;
    }
    @keyframes bg {
      from {
        background: rgba(0, 0, 0, 0.4);
      }
      to {
        background: rgba(0, 0, 0, 0);
      }
    }
    .list {
      background: #fff;
      height: 100%;
      width: 200px;
      position: relative;
      font-size: 16px;
      &.animate {
        // cubic-bezier(.23,1,.32,1)
        animation: 0.3s left0 cubic-bezier(0.68, -0.55, 0.265, 1);
      }
      @keyframes left0 {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0);
        }
      }
      &.animate1 {
        animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) left1;
      }
      @keyframes left1 {
        from {
          transform: translateX(0%);
        }
        to {
          transform: translateX(-100%);
        }
      }

      .title {
        position: relative;
        z-index: 2;
        @include theme-color-btn;
        line-height: 56px;
        .iconxuqiudengji {
          margin: 0px 5px 0 30px;
          font-size: 18px;
        }
        .iconxia {
          float: right;
          padding: 0 15px;
          font-size: 18px;
          transition: all 0.3s;
        }
        .curr {
          transform: rotate(180deg);
        }
      }

      .column {
        // height: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
        transform: translateY(-100%);
        background: #fff;
        position: relative;
        z-index: 0;
        li {
          border-bottom: 1px solid #eee;
          line-height: 48px;
          padding-left: 30px;
          font-size: 14px;
          .link {
            color: $gray;
            display: block;
            &.curr {
              font-weight: bold;
            }
          }
          i {
            font-size: 15px;
            margin-right: 10px;
          }
        }
        &.show {
          //height: 196px;
          transform: translateY(0);
        }
      }
      .message {
        position: absolute;
        bottom: 20px;
        margin: 0px 10px;
        @include warn-all;

        font-size: 14px;
        padding: 10px;
        .titles {
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}
</style>